<template>
  <div v-loading="loading" class="drawer-right-content" :class="{ 'drawer-right-content-hide': !visible }">
    <!-- 顶部tit -->
    <div class="drawer-tit">
      <div>
        <span>
          <img :src="$getAssetsFile('draw-tit.png')" alt="" />
        </span>
      </div>
      <div class="flex">
        <el-icon><i-ep-close @click="handleClose" /></el-icon>
      </div>
    </div>
    <!-- 数据集列表 -->
    <div class="drawer-content-items">
      <template v-if="dataList.length > 0">
        <div
          v-for="(item, index) in dataList"
          :key="index + 'rightDraw'"
          ref="drawerContentRef"
          class="drawer-content-item"
          :class="{ drawerActive: sortNum == index + 1 }"
        >
          <template v-if="item.activeName == -1">
            <div class="drawer-content-item-tit" style="padding-bottom: 17px; cursor: auto">当前问题没有对应的相关文献。</div>
          </template>
          <template v-else>
            <div class="drawer-content-item-tit">
              <em>{{ index * 1 + 1 }}.</em>
              <a :href="'https://www.ncmi.cn/phda/dataDetails.do?id=' + (item.systemsing || '')" target="_blank">
                {{ item.name_ch }}
              </a>
            </div>
            <div class="drawer-content-item-abs">
              <ExpandableContent :key="item.id" :content="item.describe" :type="'abstract'" :maxWordCount="110" />
            </div>
          </template>
        </div>
      </template>
      <template v-else>
        <div class="drawer-content-item">
          <el-skeleton />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: "RightDrawer",
  /** 禁用自动继承属性 */
  inheritAttrs: false
});

import "@/assets/styles/list.css";
import { getVectorData } from "@/hooks/ai-dialogue";

const props = defineProps({
  open: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  sortNum: {
    type: Number,
    default: 1
  }
});
const emits = defineEmits(["update:open"]);

let visible = computed({
  get() {
    return props.open;
  },
  set(val) {
    emits("update:open", val);
  }
});

const dataList = computed(() => {
  return getVectorData();
});

// 滚动
const drawerContentRef = ref([]);
watch(
  () => props.sortNum,
  (val) => {
    drawerContentRef.value[props.sortNum - 1].scrollIntoView({ behavior: "smooth", block: "start" });
  }
);

const handleClose = () => {
  emits("update:open", false);
};
</script>

<style lang="scss" scoped></style>
